<template>
  <div class="account_page h-screen py-10 bg-gray-100">
    
    <div class="account_wrapper px-6">
      <header
        class="account__header flex flex-row align-center justify-between space-x-4 py-2 m-2 rounded-2xl bg-white bg-opacity-70"
      >
        <div class="avatar flex flex-row items-center space-x-2">
          <van-icon
            class="iconfont"
            class-prefix="icon"
            name="user"
            size="2.5rem"
            color="rgb(25,25,25)"
          />
          <div class="title font-bold text-xl flex items-center">
            {{ userName }}
          </div>
        </div>

        <div
          class="gotoLogin flex items-center space-x-2"
          @click="gotoLogin"
          v-if="userName === '请先登录哦'"
        >
          去登录
          <van-icon name="arrow" />
        </div>
      </header>
      <div class="flex justify-center">
      <van-loading color="#1989fa" size="48" flex/>
      </div>

      <main
        class="bg-white bg-opacity-100 mt-4 rounded-2xl p-4 max-h-72 overflow-y-auto"
      >
        <h2>常用功能</h2>
      </main>
    </div>
    
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { useRouter } from "vue-router";

const router = useRouter();
const userName = ref("");
userName.value = localStorage.getItem("userName") || "请先登录哦";

const gotoLogin = () => {
  router.push("/login");
};


</script>

